<template>
	<view>
		<Newmsg ref="newmsg" :newmsg="newmsg" :message="true"  @backData='back'></Newmsg>
		<view class="main">
			<view v-if="hasLogin">

				<u-subsection :list="menulist" :current="current" @change="checkSub"></u-subsection>
				<view style="margin:80rpx;" v-if="dataloading">
					<u-loading-icon mode="circle" :show="dataloading"></u-loading-icon>
				</view>
			</view>

		</view>
		<view class="message-list" v-if="!msgList.length && !dataloading">
			<view class="nodata">没有消息</view>
		</view>
		<view class="message-list" v-else>
			<view class="message-box" v-if="current==0">
				<view class="message-content" v-for="(item,idx) in msgList" @click="goView(item.wzinfo.wid)">
					<u-gap height="10" bgColor="#f8f8f8"></u-gap>
					<view class="message-time">{{item.create_time}}</view>
					<view class="message-content-body" v-if="item.status==1">
						<view class="message-title">您的留言正在审核中，通过后将给你推送消息。</view>
						<view class="message-wid">{{item.wzinfo.title}}</view>
					</view>

					<view class="message-content-body" v-if="item.status==2">
						<view class="message-title">您的留言审核通过，该留言已发布。</view>
						<view class="message-wid">{{item.wzinfo.title}}</view>
					</view>

					<view class="message-content-body" v-if="item.status==3">
						<view class="message-title">你的留言已经被相关单位回复，请查看。</view>
						<view class="message-wid">{{item.wzinfo.title}}</view>
					</view>


					<view class="message-content-body" v-if="item.status==4">
						<view class="message-title">感谢你的评价，谢谢。</view>
						<view class="message-wid">{{item.wzinfo.title}}</view>
					</view>

					<view class="message-content-body" v-if="item.status==5">
						<view class="message-title">系统已给您的留言设置为优秀留言。</view>
						<view class="message-wid">{{item.wzinfo.title}}</view>
					</view>

					<view class="message-content-body" v-if="item.status==6">
						<view class="message-title">您的留言正在处理中...</view>
						<view class="message-wid">{{item.wzinfo.title}}</view>
					</view>

					<view class="message-content-body" v-if="item.status==7">
						<view class="message-title">您的留言已转交相关单位，请耐心等待回复结果。</view>
						<view class="message-wid">{{item.wzinfo.title}}</view>
					</view>

					<view class="message-content-body" v-if="item.status==8">
						<view class="message-title">您的留言违反平台规定，已被系统删除。</view>

						<view class="message-wid">{{item.wzinfo.title}}</view>
					</view>

					<view class="message-content-body" v-if="item.status==9">
						<view class="message-title">您的留言已经恢复。</view>
						<view class="message-wid">{{item.wzinfo.title}}</view>
					</view>

					<view class="message-content-body" v-if="item.status==10">
						<view class="message-title">您的留言违反了平台规定。系统对您的账号采取封号处理，如有异议请联系平台管理员。</view>
						<view class="message-wid">{{item.wzinfo.title}}</view>
					</view>

					<view class="message-content-body" v-if="item.status==11">
						<view class="message-title">您的留言短期内存在重复内容，或者与他人一同发布重复内容，系统删除多余留言。</view>
						<view class="message-wid">{{item.wzinfo.title}}</view>
					</view>


				</view>
			</view>
			<view class="message-box" v-else-if="current==2">
				<u-gap height="10" bgColor="#f8f8f8"></u-gap>
				<view class="message-content" v-for="(item,idx) in msgList"
					style="border-bottom:1px solid #eee;padding-bottom:20rpx">

					<view class="message-time">{{$u.timeFormat(item.time, 'yyyy-mm-dd')}}</view>
					<view class="message-content-body">
						<view class="message-title">{{item.message}}</view>
						<view class="message-wid" v-if="item.status==2">{{item.value}}</view>
					</view>

				</view>
			</view>
			<view class="message-box" v-else-if="current==1">
				<u-gap height="10" bgColor="#f8f8f8"></u-gap>
				<view class="message-content" v-for="(item,idx) in msgList"
					style="border-bottom:1px solid #eee;padding-bottom:20rpx">
					<view class="admin_message">
						<view class="avatar">
							<image :src="item.avatar"></image>
						</view>
						<view class="right_info">
							<view class="admin_user"
								style="display: flex;align-items: center;justify-content: space-between;padding-bottom:20rpx;margin-top:40rpx;">
								<view class="message-time" style="color:#000;padding:0">{{item.admin_u_name}}</view>
								<view class="message-time" style="padding:0">{{$u.timeFormat(item.time, 'yyyy-mm-dd')}}
								</view>
							</view>

							<view class="message-content-body" style="background-color: #f8f8f8;">
								<view class="message-title" style="font-weight: bold;margin-top:10rpx;">{{item.title}}
								</view>
								<view class="message-wid" style="padding:0;margin-top:10rpx;">{{item.content}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	import Newmsg from '@/uni_modules/Lylist/newmsg.vue';
	import {
		getUserSms,
	} from '@/api/api.js';
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		components: {
			Newmsg
		},
		data() {
			return {
				newmsg: true,
				dataloading: true,
				current: 0,
				msgList: [],
				admin: 0,
				system: 0,
				shensu: 0,
				menulist: ['系统消息', '管理员消息', '申诉消息']
			}
		},
		onShow() {
			let _this = this;
			if (!_this.hasLogin) {
				uni.navigateTo({
					url: '/pages/user/login'
				})
			} else {
				_this.dataloading = true
				_this.getMsg()
				this.newmsg = true
			}
		},

		onHide() {
			this.newmsg = false
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		methods: {
			back(data){
				this.setMsgMenu(data)
			},
			goView(wid) {
				if (wid) {
					uni.navigateTo({
						url: '/pages/index/thread?wid=' + wid
					})
				}
			},
			setMsgMenu(data) {
				if (data.system > 0) {
					this.$set(this.menulist,0,'系统消息(' + data.system + ')')
				}else{
					this.$set(this.menulist,0,'系统消息')
				}
				if (data.admin > 0) {
					console.log(data.admin)
					this.$set(this.menulist,1,'管理员消息(' + data.admin + ')')
				}else{
					this.$set(this.menulist,1,'管理员消息')
				}
				if (data.shensu > 0) {
					this.$set(this.menulist,2,'申诉消息(' + data.shensu + ')')
				}else{
					this.$set(this.menulist,2,'申诉消息')
				}
			
			},
			getMsg() {
				let _this = this;
				getUserSms({
					check: parseInt(_this.current)+1
				}).then(r => {
					_this.dataloading = false
					if (r.data.code == 200) {
						_this.msgList = r.data.data
						_this.setMsgMenu(r.data.msg)
					}
				})
			},
			checkSub(n) {
				// console.log(n)
				
				this.current = n
				this.msgList = []
				this.dataloading = true
				this.getMsg()
			}

		}
	}
</script>

<style lang="scss" scoped>
	.admin_message {
		display: flex;

		.avatar {
			width: 80rpx;
			height: 80rpx;
			padding: 20px 0 0 20px;
			margin-right: 20rpx;
			position: relative;

			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 100%;
			}
		}

		.right_info {
			width: calc(100% - 180rpx);
		}
	}

	.main {
		padding: 40rpx;
	}

	.message-list {
		.nodata {
			text-align: center;
			color: #999;
			font-size: 28rpx;
			margin: 90rpx;
		}
	}

	.message {
		&-time {
			padding: 40rpx;
			color: #999;
			padding-bottom: 0;
			font-size: 28rpx;
		}

		&-content-body {
			padding: 15rpx 40rpx;
			font-size: 32rpx;
		}

		&-wid {
			background-color: #f8f8f8;
			padding: 20rpx;
			border-radius: 20rpx;
			margin: 20rpx 0;
			color: #999;
			font-size: 28rpx;
		}
	}
</style>